<template>
	<view class="ethapprove">
		<!-- <StatusBar></StatusBar> -->
		<HeaderBar title="Approve授权检测" showBack backgroundColor="#FFF" fixed />
		<view class="header" :initdata="initdata" :change:initdata="renderjs.getalldata" :token="token">
			<view class="search">
				<uni-search-bar placeholder="输入代币合约地址查询" bgColor="#F5F6F8" :cancelText="cancelText" cancelButton='always'
					@cancel="cancel" v-model="searchValue" @confirm="search">
					<template v-slot:searchIcon>
						<image src="/static/images/home/search.png" class="icon" mode=""></image>
					</template>
				</uni-search-bar>
			</view>
		</view>
		
		<view class="contentBox">
			<view class="hotCoin">
				<view class="hotTitle">
					热门代币
				</view>
				<view class="hotList">
					<scroll-view scroll-y="true" class="scroll">
						<view class="" v-for="(i,index) in chainInfo.coin" :key="index" v-if="chainInfo">
							<view class="itemBox" v-if="i.contract != $config.defaultAddress">
								<view class="item_icon">
									<image
										:src="'/static/images/tokenicon/' +i.contract+chainInfo.chainType+chainInfo.chainId+'.png'"
										mode="widthFix" class="icon" @error="imageError(i)" v-if="!i.err">
									</image>
									<image src="/static/images/notoken.png" mode="widthFix" class="icon" v-show="i.err">
									</image>
								</view>
								<view class="right">
									<view class="coindes">
										<view class="name">
											<text>{{i.symbol}}</text>
										</view>
										<view class="address">
											{{$utils.formatAddress(i.contract)}}
										</view>
									</view>
									<view class="state" @click="approveDetail(i.contract,i.symbol,i.decimal)">
										查看授权
									</view>
								</view>
							</view>
						</view>
					</scroll-view>

				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: "",
				selectChain: {},
				hotTokens: [],
				tokensList: [],
				token: "",
				timeId: "",
			}
		},
		computed: {
			initdata() {
				return {
					rpc: this.rpc,
					erc20: this.$config.erc20,
					token: this.token,
					timeId: this.timeId
				}
			},
			chainInfo() {
				return this.$store.getters.chainInfo
			},
			addressInfo() {
				return this.$store.getters.addressInfo
			},
			address() {
				return this.$store.getters.getAddress;
			},
			chainId() {
				return this.$store.getters.getChainId;
			},
			rpc() {
				return this.$store.getters.getRpc
			},
			cancelText(){
				if(!this.searchValue){
					return "取消"
				}else{
					return "搜索"
				}
			}
		},
		mounted() {

		},
		methods: {
			imageError(item) {
				this.$set(item, 'err', true);
			},
			approveDetail(token, symbol, decimal) {
				uni.navigateTo({
					url: `/pages/approveJump/approveJump?token=${token}&symbol=${symbol}&decimal=${decimal}`
				})
			},
			getInfo(tokenInfo) {
				let {
					token,
					symbol,
					decimals
				} = tokenInfo
				this.approveDetail(token, symbol, decimals)
			},
			search(res) {
				if (res.value) {
					this.timeId = Date.now()
					this.token = res.value
				} else {
					this.error("请输入合约地址")
				}

			},
			cancel(res) {
				if(res.value){
					this.search(res)
				}else{
					uni.navigateBack();
				}
			},
			error(tip) {
				uni.showToast({
					title: tip,
					position: "bottom",
					icon: "none",
					duration: 2000
				});
			},
			showLoading() {
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
			},
			hideLoading() {
				uni.hideLoading()
			},
			onBackPress() {
				// #ifdef APP-PLUS
				plus.key.hideSoftKeybord();
				// #endif
			},
		}
	}
</script>
<script module="renderjs" lang="renderjs">
	export default {
		data() {
			return {
				jsLoadState: false,
				// 同步过来的初始化数据
				initdata: {},

			}
		},
		mounted() {
			const ethersScript = document.createElement('script');
			ethersScript.src = 'static/script/ethers-5.2.umd.min.js';
			ethersScript.onload = async () => {
				this.jsLoadState = true;
				if (this.initdata) {
					this.getInfo()
				}
			};
			document.head.appendChild(ethersScript);
		},
		methods: {
			// 同步数据
			getalldata(newValue) {
				if (newValue) {
					this.initdata = newValue
					if (this.jsLoadState == true) {
						this.getInfo()
					}
				}
			},
			async isContractAddress(provider, address) {
				try {
					const code = await provider.getCode(address);
					return code.length > 2;
				} catch (error) {
					return false;
				}
			},
			async getInfo() {
				if (!this.initdata.rpc || !this.initdata.token || !this.initdata.erc20) {
					return
				}
				this.$ownerInstance.callMethod('showLoading')
				try {
					// 创建提供者和钱包实例
					const provider = new ethers.providers.JsonRpcProvider(this.initdata.rpc);
					// 检查地址是否为合约地址
					if (await !this.isContractAddress(provider, this.initdata.token)) {
						throw new Error('地址有误');
					}
					// 创建合约实例
					const contract = new ethers.Contract(this.initdata.token, this.initdata.erc20, provider);
					// 获取合约名字
					const symbol = await contract.symbol();
					// 获取合约小数位
					const decimals = await contract.decimals();
					let tokenInfo = {
						token: this.initdata.token,
						symbol,
						decimals,
					}
					this.$ownerInstance.callMethod('hideLoading')
					this.$ownerInstance.callMethod('getInfo', tokenInfo);
					
				} catch (error) {
					this.$ownerInstance.callMethod('hideLoading')
					return this.$ownerInstance.callMethod('error', "地址有误")
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.ethapprove {
		height: 100%;
		color: #3D3D3D;
		font-weight: 400;
		display: flex;
		flex-direction: column;

		.header {
			display: flex;
			align-items: center;
			padding: 0 38upx;

			.search {
				flex: 1;

				.icon {
					width: 26upx;
					height: 26upx;
				}

				.uni-searchbar {
					padding: 20upx 0;
				}

				.uni-searchbar__box {
					height: 66upx;
				}
			}

			.san {
				display: flex;
				margin-left: 26upx;

				.icon {
					width: 54upx;
					height: 54upx;
				}
			}
		}

		.contentBox {
			flex: 1;
			position: relative;

			.hotCoin {
				position: absolute;
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				padding-left: 38upx;
				padding-top: 20upx;
				border-top: 20upx solid #EFEFEF;

				.hotTitle {
					font-size: 30upx;
					margin-bottom: 20upx;
				}

				.noticeBox {
					display: flex;
					margin-top: 26upx;
					padding-right: 38upx;

					.notice {
						font-weight: bold;
						height: 88upx;
					}
				}

				.hotList {
					flex: 1;
					position: relative;

					.scroll {
						position: absolute;
						width: 100%;
						height: 100%;
					}

					.itemBox {
						display: flex;
						height: 120upx;
						align-items: center;

						.item_icon {
							display: flex;

							.icon {
								width: 68upx;
								height: 68upx;
								border-radius:50%;
							}
						}

						.right {
							height: 120upx;
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-left: 22upx;
							padding-right: 46upx;
							border-bottom: 1upx solid #D8D8D8;

							.name {
								display: flex;
								align-items: center;
								font-size: 30upx;
							}

							.address {
								color: #A2A2A2;
								font-size: 24upx;
							}

							.state {
								display: flex;
								font-size: 20upx;
								color: #368321;

								.icon {
									width: 44upx;
									height: 44upx;
								}
							}
						}
					}
				}
			}
		}
	}
</style>